<template>
    <div>
        <div id="map" class="wemap">
        </div>
        <div class="polu_info">
            PM2.5: {{pm25}}<br>
            PM10: {{pm10}}<br>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from 'vuex'
    import env from '../global/env'
//    import  '../../static/mapboxgl.js'
//    import  '../../static/mapboxgl.css'
    export default{
        name: 'wemap',
        data () {
            return {
                usr: 1,
                popup:null,
            }
        },
        components: {},
        created () {
            console.log("wehome wemap created");
//            this.$store.dispatch('getAirPolutionExponent', {lat:116.417,lng:39.929})
        },
        mounted () {
            this.initMap()
            this.setPopupStyle()
        },
        computed: {
            ...mapGetters({
                polutionInfo:'polutionInfo'
            }),
            pm25(){
                return this.polutionInfo.iaqi ? this.polutionInfo.iaqi.pm25.v : ""
            },
            pm10(){
                return this.polutionInfo.iaqi ? this.polutionInfo.iaqi.pm10.v : ""
            }

        },
        methods: {
            initMap(){
                let that = this
                mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuaWVsdGFvMTk5MyIsImEiOiJjaXNrMHpzZWYwMDNmMzNybmFsbzl4ejA4In0.h2jqPB0W6CMBbxPKRguNXA';
                var map = new mapboxgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/streets-v9',
                    center: [116.46, 39.92],
                    minZoom: 3,
                    maxZoom: 17,
                    zoom: 10,
                    pitch: 30,
                });
                env.map = map
                var nav = new mapboxgl.NavigationControl();
                map.addControl(nav, 'bottom-right');
                env.map.on("click", (e)=> {
                    console.log(`点击位置是：${e.lngLat}`)
                    that.addPopUpToMap(e.lngLat)
                    that.$store.dispatch('getAirPolutionExponent', e.lngLat)

                })
                env.map.resize()
            },
            addPopUpToMap(lngLat){
                if(this.popup){
                    this.popup.remove()
                }
                this.popup = new mapboxgl.Popup({closeOnClick: false})
                        .setLngLat(lngLat)
                        .setHTML(`<h1 class="polution-popup">当前经纬度：${lngLat.lat},${lngLat.lng}</h1>`)
                        .addTo(env.map);
            },
            setPopupStyle(){
                var popstyle = ".mapboxgl-popup-content {background: rgba(46, 54, 113, 1) !important;font-size: 17px !important; color:white !important; padding: 4px !important;}" +
                        ".mapboxgl-popup-close-button { visibility: hidden !important; }"

                if (document.all) {
                    window.style = popstyle
                    document.createStyleSheet("javascript:style");
                } else {
                    var style = document.createElement('style');
                    style.type = 'text/css';
                    style.innerHTML = popstyle;
                    document.getElementsByTagName('HEAD').item(0).appendChild(style);
                }
            },
        },
        filters: {}
    }
</script>
<style>
    #map {
        position:absolute;
        height: 100%;
        width: 100%;
        /*flex: 1;*/
        z-index:10;
    }
    .polution-popup{
        font-size: 16px;
        color: yellow;
    }
    .polu_info{
        position: absolute;
        height: auto;
        width: auto;
        min-width: 15%;
        min-height: 5%;
        top:10%;
        right: 10%;
        background-color: rgba(255, 227, 11, 0.7);
        color: #3113ff;
        z-index: 20;
        border-radius: 10px;
        text-align: center;
    }


</style>
